<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" isELIgnored="false" %>
<%@ include file="/views/common/resources.jsp" %>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>      
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <link href="<%=basePath %>resources/js/common/plugin/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="<%=basePath %>resources/js/common/plugin/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="<%=basePath %>resources/js/common/plugin/My97DatePicker/skin/WdatePicker.css" rel="stylesheet">
	<link href="<%=basePath %>resources/js/common/plugin/select2/css/select2.min.css" rel="stylesheet" />
	<link href="<%=basePath %>resources/js/common/plugin/flexigrid/flexigrid.css" rel="stylesheet" />
	<link href="<%=basePath%>resources/js/common/plugin/easyui/themes/default/easyui.css" rel="stylesheet"/>
	<link href="<%=basePath %>resources/css/common.css" rel="stylesheet">
    <link href="<%=basePath %>resources/css/style.css" rel="stylesheet">
    <link href="<%=basePath %>resources/css/report.css" rel="stylesheet">
	<script src="<%=basePath %>resources/js/common/plugin/jquery/jquery.min.js"></script>
	<script src="<%=basePath %>resources/js/common/plugin/select2/js/select2.min.js"></script>
    <script src="<%=basePath %>resources/js/common/plugin/echarts/echarts.min.js"></script>
    <script src="<%=basePath %>resources/js/common/plugin/bootstrap/js/bootstrap.js"></script>
    <script src="<%=basePath %>resources/js/common/plugin/My97DatePicker/WdatePicker.js"></script>
    <script src="<%=basePath %>resources/js/common/plugin/flexigrid/flexigrid.js"></script>
    <script src="<%=basePath%>resources/js/common/plugin/easyui/jquery.easyui.min.js"></script>
<script src="<%=basePath%>resources/js/common/plugin/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="<%=basePath %>resources/js/common/util/common.js"></script>
     <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=d782d52560e7b77e0d764b1496c60dde&plugin=AMap.Geocoder"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=385577b6ff757e839378ee75ab9724dc"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<title>异常驾驶行为分析</title>
<style>
	.plateNum{
		bottom: 380px;
    	left: 0px;
    	zoom: 1;
    	position: relative;
    	width:200px;
    	height:40px;
	}
	.bolderstyle{
		border-left: 1px solid #dfdddd;
    	border-top: 1px solid #dfdddd;
    	border-bottom: 1px solid #dfdddd;
    
    	border-right: 1px solid #dfdddd;
    	padding: 6px;
    	background: #fff;
    	
    	font-size:14px;
    	line-height:28px;
    	text-align:center;
	}
	.night-chart-list{
		height:300px;
	}
	.night-chart-bar{
		width:100%;height:100%;/* border-right: 1px dashed #dfdddd; */
	}
	.top_style{
		border-top: 1px dashed #dfdddd;
		margin-top:20px;
	}
	.anchorBL{
		display:none;
	}	
</style>
</head>
<script type="text/javascript">
var appCtx="<%=basePath%>";
</script>
<body class="driving">
<div class="page">
    <div class="slider pa clearfix">
        <%@ include file="/views/common/menu.jsp" %> 
    </div>
    <div class="main pr">
      <%@ include file="/views/common/top.jsp" %> 
        <%-- <div class="slider pa clearfix">
           	<%@ include file="/views/common/menu.jsp" %> 
        </div> --%>
        <div class="content">
            <div class="query clearfix">
                 <div class="query-list fl" style="border:1px solid #e2e5eb" >
                    <select class="query-select" id="selectAlarmtype" >
                    </select>
                </div>
       
                 <div class="query-list fl" style="border:1px solid #e2e5eb" >
                    <select class="query-select" id="selectVehicleUnitSel">
                    </select>
                </div>
                <div class="query-list fl"  id="vehicleSelDiv" style="border:1px solid #e2e5eb">
                    <select class="query-select" id="selectVehicleSel">
                    </select>
                </div>
                <div class="query-list fl">
                    <input type="text" id="inputStartDate" class="query-input fl Wdate Time_input" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d'})" >
                    <span class="fl query-text">至</span>
                    <input type="text" id="inputEndDate" class="query-input Wdate Time_input" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d'})" >
                </div>
                <a class="query-btn query-require db fl" href="javascript:;" title="查询" id="queryBtn">查询</a>
                <a class="query-btn query-export db fl" href="javascript:;" title="导出" id="exportExcel">导出</a>
            </div>
            <div class="chart row-fluid " style="margin-top:20px;">
                <!-- <div id="tbVehicleAreaDetail" class="night-chart-bar"></div> -->
               	<div class="span7 night-chart-list chart-bar">
                	<div id="barChart" class="night-chart-bar"></div>
                </div>
                 <div class="span5 night-chart-list" id="pieChart"></div>
               
                
            </div>
         <div class="chart row-fluid top_style">
                 
                <div class="span7 chart-list chart-bar" id="chartDriving2">
                	<div id="container" style="margin-top: 20px;width:100%;height:93%;"></div>
                
                	<div id="speedDiv" style="position:absolute;left:50px;bottom:10px;height:20%;width:20%;z-index:15;background: rgb(252, 249, 242);" >
						<div id="speedCharts" style="width:90%;height: 90%;left:5%;"></div>
					</div> 
                	<div id="plateNum" class="plateNum bolderstyle" style="display:none;">粤A00001 (自编号)</div> 
                </div>
                <div class="span5 night-chart-list chart-line" id="chartMillage2">
		            <div class="detail-report" style="margin-top:20px;">
		                <table class="table" id="objTable">
		                </table>
            		</div>
                </div>
            </div>
             <!-- 图片弹框 -->
			 <div id="pictureModal" class="modal hide fade" data-backdrop="static"
		             style="left: 45%; width:600px;height:400px;top: 15%;" aria-hidden="false" tabindex="-1"
		             data-backdrop="static">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		                <h4 id="modalTitle">图片展示</h4>
		            </div>
		            <div class="modal-body" style="vertical-align: middle;height:320px;">
		            	<div id="container"  style="width:570px;height:295px;position:absolute;overflow:auto;">
							<img id="largeImgage" style="width:100%;height:auto;" src="">
							<span id = "msg" >无图片/视频记录</span>
						</div>
		            </div>
		            <div class="modal-footer">
		                <button class="btn btn-ecColor" data-dismiss="modal" aria-hidden="true">关闭</button>
		                <!-- <button class="btn btn-ecColor" id="enlarge" name="enlarge">放大</button> -->
		            </div>
	        </div>
	        <!-- 视频弹框 -->
			 <div id="vedioModal" class="modal hide fade" data-backdrop="static"
		             style="left: 45%; width:600px;height:400px;top: 15%;" aria-hidden="false" tabindex="-1"
		             data-backdrop="static">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		                <h4>视频展示</h4>
		            </div>
		            <div class="modal-body" style="vertical-align: middle;height:320px;">
							<video id="showVedio" src="" controls="controls" width="565px" height="280px">
								<!-- <source src="/example/html5/mov_bbb.mp4" type="video/mp4" /> -->
							</video>
		            </div>
		            <div class="modal-footer">
		                <button class="btn btn-ecColor" data-dismiss="modal" aria-hidden="true">关闭</button>
		            </div>
        	</div>
        
        </div>
    </div>
</div>

	<div id="exportModal" class="modal  hide fade" tabindex="-1"
				style="width: 500px; left: 50%; top: 30%;z-index: 2000;" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 id="myModalLabel">导出异常驾驶统计</h4>
				</div>
				<div class="modal-body" style="font-size: 13px;vertical-align: middle; text-align: center;height:70px;">
					<span>页数:</span>
					<input class="input-medium" id="StartPageIndex" type="number" value="1"><span>&nbsp;到&nbsp;</span>
					<input class="input-medium" id="EndPageIndex" type="number">
				</div>
				<div class="modal-footer">
					<button class="btn closeBtn" data-dismiss="modal" id="canDelBth"
						aria-hidden="true">关闭</button>
				   <button class="btn " id="confirmOK">导出</button>
			
				</div>
			</div>
<script src="<%=basePath %>resources/js/common/main/HashMap.js"></script>
<script src="<%=basePath %>resources/js/common/main/base64.js"></script>
<script src="<%=basePath %>resources/js/common/main/global.js"></script>
<script src="<%=basePath %>resources/js/common/main/nav.js"></script>
<script src="<%=basePath %>resources/js/common/main/mapToop.js"></script>
<script src="<%=basePath %>resources/js/common/util/common.js"></script>
<script src="<%=basePath %>resources/js/business/report/statisticalAnomal.js"></script>
</body>
</html>